iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
自我挑戰組

ProtoPie 摸一摸系列 第 24

連續 30 天 玩玩看 ProtoPie - Day 24

  • 分享至 

  • xImage
  •  

先把原本的內容跟完。

現在不管轉多少都還是 0% ,要怎麼讓數值顯示出來呢?

https://ithelp.ithome.com.tw/upload/images/20211009/20141941Cdzo3fT9eR.png

使用 Variable 來顯示數值

我們先在左下角創造一個新的 Variable 並命名為 value 。

https://ithelp.ithome.com.tw/upload/images/20211009/20141941026Rzjg9yP.png

Chain 上的兩個 Rotate 後面接上一個 Assign 的 Response 。

https://ithelp.ithome.com.tw/upload/images/20211009/201419417tHQBR4RSi.png

右手邊設定為 Value 並且讓旋轉鈕的 0 到 360 映射到 Value 的 0 到100 。
(所以兩邊會等比例的增減)

https://ithelp.ithome.com.tw/upload/images/20211009/20141941A8lm5iyWfj.png

我們開 Preview 之前,可以先在 Value 上面點一下那隻蟲,就是 Debugger 。
(滑鼠移動到上方就會出現)
(然後剛剛才意識到可以把 Debugger 出現的地方移動到中間)

https://ithelp.ithome.com.tw/upload/images/20211009/201419410lPc3QOwkE.png

用 Preview 一看,轉到任何地方就會顯示那個地方在 0 到 100 裡的位置。

https://ithelp.ithome.com.tw/upload/images/20211009/20141941rp0SqklrHs.png

接著我們加上一個 Detect 的 Trigger 來偵測 Value 的值。

https://ithelp.ithome.com.tw/upload/images/20211009/20141941Yzm7HDStFD.png

我們加上一個 Text 的 Response,會看到很多要設定的地方變黃色,先把最上面的 Layer 選 Value 。

https://ithelp.ithome.com.tw/upload/images/20211009/20141941hB8DGEMbuT.png

接著把 Content 設定為 Formula。

https://ithelp.ithome.com.tw/upload/images/20211009/20141941HyXFSiBJgS.png

Formula 我們使用 round(value)+”%” ,就是字面上的意義,把 Value 四捨五入成整數,加上一個 % 的符號。

https://ithelp.ithome.com.tw/upload/images/20211009/20141941sfCjuEDtyD.png

然後在找一些資料的過程中,無意間發現 Soda Design 的一些教學。

滿喜歡他的風格,而且剛好他也有在講旋轉鈕,他叫做 Donut Ring Controller ,很可愛。

https://www.youtube.com/watch?v=yMavG8NQGsk

有機會可以參考一下!


上一篇
連續 30 天 玩玩看 ProtoPie - Day 23
下一篇
連續 30 天 玩玩看 ProtoPie - Day 25
系列文
ProtoPie 摸一摸30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言